<template>
	<view class="rep-deta-wrap u-p-30 u-p-t-40" style='border-top: 1px solid #0000001A;'>
		<view class="" style='display: flex;font-size: 14px;line-height: 27px;padding: 0 0 10px;'>
			<view class="" style='margin-right: 20px;'>
				<img style="width:73px;" :src="detail.imgUrl ? detail.imgUrl:url" alt="">
			</view>
			<view class="">
				<view class="">
					<text style='color: #666;'>维修人员：</text>
					<text style='color: #333;'>{{detail.unitName}}</text>
				</view>
				<view class="">
					<text style='color: #666;'>联系方式：</text>
					<text style='color: #333;'>{{detail.unitTel}}</text>
				</view>
				<view class="" style='display: flex;'>
					<text style='color: #666;'>总体评分：</text>
					<view class="" style='display: flex;margin-top: 4px;'>
						<uni-rate disabled :margin="8" allow-half :size="18" disabledColor="#F9A832" v-model="detail.score" />
						<text style='color:#F9A832;margin-top: -4px;'>{{detail.score}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="rep-deta-row u-m-b-30"></view>
		<viewData :type="'noData'" :nextPage="!nextPage" :isTab="false" :isData="listData.length < 1" :loading="loading"
		          @onRefresh="onRefresh">
			<view class="" v-for="(item,index) in listData" :key='index' style='font-size: 16px;font-weight: 500;padding-bottom: 20px; border-bottom: 1px solid #0000001A;'>
				<view class="" style='line-height: 30px;'>
					<view class="" style='display: flex;justify-content: space-between;'>
						<text style='color: #666;'>报修类型</text>
						<text style='color: #333;'>{{item.repairsInfo.reapirsType}}</text>
					</view>
					<view class="" style='display: flex;justify-content: space-between;'>
						<text style='color: #666;'>工单号</text>
						<text style='color: #333;'>{{item.repairsInfo.repairs_code}}</text>
					</view>
					<view class="" style='display: flex;justify-content: space-between;'>
						<text style='color: #666;'>报修时间</text>
						<text style='color: #333;'>{{item.repairsInfo.repairs_time}}</text>
					</view>
				</view>
				<view class="" style='margin-top: 15px;'>
					<view class="" style='display: flex;'>
						<img style="width:45px;border-radius: 50px;" :src="item.employee_img ? item.employee_img : url" alt="">
						<text style='color:#999999;line-height: 45px;margin-left: 15px;'>{{item.user_name}}</text>
					</view>
					<view class="" style='color:#666666;padding: 10px 0;line-height: 22px;word-wrap: break-word; word-break: normal;'>
						{{item.remark}}
					</view>
					<view class="" style='display: flex;justify-content: space-between;'>
						<text style='color: #999999;'>业主评价</text>
						<view class="" style='display: flex;'>
							<uni-rate disabled :margin="8" allow-half :size="18" disabledColor="#F9A832" v-model="item.scores" />
							<text style='color:#F9A832;'>{{item.scores}}</text>
						</view>
					</view>
				</view>
			</view>
		</viewData>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageIndex: 1,
				by_user_id: null,
				nextPage: false,
				listData: [],
				loading: false,
				detail: {},
				url: 'https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg'
			}
		},
		onShow() {
			this.homeData = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum')];
			this.getclapList();
			this.getDetailS();
		},
		onLoad(options) {
			if (options) {
				this.by_user_id = options.id
			}
		},
		methods: {
			onRefresh() {
				if (!this.nextPage) {
					this.pageIndex = 1;
					this.getclapList()
				}
				this.loading = false;
				uni.hideLoading();
			},
			getDetailS() {
				this.$request.api.getDetailScore({
					user_id: this.by_user_id,
					pro_id: uni.getStorageSync('projectItem').proId,
					selectType: 3,
				}).then(res => {
					if (res.data.data) {
						this.detail = res.data.data
					}
				})
			},
			getclapList() {
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
				this.$request.api.getScoreList({
					pageIndex: this.pageIndex,
					pro_id: uni.getStorageSync('projectItem').proId,
					selectType: 3,
					by_user_id: this.by_user_id,
				}).then(res => {
					console.log(res.data)
					if (this.pageIndex == 1) {
						this.listData = res.data.data.datalist || [];
					} else {
						this.listData = [...this.listData, ...res.data.data.datalist];
					}
					this.nextPage = res.data.data.isEndPage
					this.loading = true;
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="scss">
	.popup_textarea {
		background: #F2F3F5;
		width: 94%;
		height: 120px;
		padding: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
	}
	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
	.wai {
		width: 100%;
		height: 400rpx;
		margin-top: 100rpx;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		line-height: 70rpx;
	}
	.beixuan {
		height: 120rpx;
		font-size: 36rpx;
		padding: 0 60rpx;
		border: 1rpx solid #dddddd;
		border-radius: 20rpx;
		margin: 20rpx 20rpx 20rpx 20rpx;
		color: #aaa;
	}
	.active {
		border: 4rpx solid #00ce88;
		color: #00ce88;
	}

	.rep-deta-wrap {
		width: 100vw;
		height: auto;
		min-height: 100vh;

		.u-btn {
			background: #F9A832 !important;
		}
	}

	.rep-deta-box {
		width: 100%;
		min-height: 28rpx;
		height: auto;
		overflow: hidden;
		line-height: 28rpx;

		.rep-deta-box-l {
			float: left;
			color: #666;
			font-size: 28rpx;

			&.rep-deta-box-l2 {
				margin-left: 30rpx;
			}
		}

		.rep-deta-box-r {
			float: right;
			color: #333;
			font-size: 28rpx;
		}

		.rep-deta-box-c {
			color: #999;
		}

		image {
			width: 216rpx;
			height: 216rpx;
			float: left;
			margin-right: 20rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.rep-deta-row {
		width: 100vw;
		height: 20rpx;
		background: #f4f4f4;
		margin-left: -30rpx;
	}

	.pay_box {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 750rpx;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 0px rgba(0, 0, 0, 0.1);

		.pay_box_left {
			width: 210rpx
		}
	}

	.pay_box_btn {
		width: 110px;
		height: 40px;
	}
</style>
